---
title: Descendant Styling | gluestack-style
description: A guide on how to style the descendants of a component. With this, you can define styles that are passed down to children.
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="styled/api/Descendants Styles" />

import { Pressable, Text } from 'react-native';
import { Button, AppProvider, CodePreview } from '@gluestack/design-system';
import { config } from './config';
import { styled, StyledProvider } from '@gluestack-style/react';

# Descendant Styles (Context based)

Descendant styles can be defined in the componentStyleConfig object, inside the component name prop starting with an underscore. This allows styles to be passed down to children using context-based styling. This approach allows for the global styling of a component to be managed in a centralized location, rather than having to pass down props.

You can create any key in the descendants object and pass a style as a value. To use this, specify the created key in the descendantStyle array, which is defined in the component config and passed as the third parameter in the styled function

<AppProvider>
  <CodePreview
    metaData={{
      scope: { styled, Pressable, Provider: StyledProvider, config, Text },
      code: `
          function App () {
            const StyledButton = styled(
              Pressable,
              {
                bg: '$primary600',
                px: '$6',
                py: '$4',
                _text: {
                  color: '$white',
                },
              },
              {
                descendantStyle: ['_text'],
              }
            );
            const StyledButtonText = styled(
            Text,
            {
              color: '$grey800',
              fontWeight: '700',
            },
            { ancestorStyle: ['_text'] }
          );
          return (
            <Provider config={config}>
              <StyledButton {...props}>
                <StyledButtonText>Hello world</StyledButtonText>
              </StyledButton>
            </Provider>
          )
        }
      `,
      argsType: {
        bg: {
          control: 'input',
          default: '$primary600',
        },
      },
    }}
  />
</AppProvider>

To apply the passed style to a child component, specify the key in the ancestor styles array of the component config when creating the component.

```jsx
const StyledButtonText = styled(
  Text,
  {
    color: '$grey800',
    fontWeight: '700',
  },
  { ancestorStyle: ['_text'] }
);
```

These styles will be automatically applied to children.
